<template>
  <div class="tops">
    <el-row class="w content_w">
      <el-col :span='16'>
        <el-card style="background:#eee" shadow='0 0 0 0'>
          <div style="background:#fff" v-for="item of list" :key="item.id">
            <div class="content_box">
              <div class="content_left">
                <img @click="detailid(item.id)" :src='item.img_url' class="shou">
              </div>
              <div class="content_right">
                <h3 class="shou"  @click="detailid(item.id)">{{item.title}}</h3>
                <div class="content_si">
                  <p>
                    <i class="el-icon-edit"></i>
                    <span>{{item.author}}</span>
                  </p>
                  <p>
                    <i class="el-icon-microphone"></i>
                    <span>{{item.podcast}}</span>
                  </p>
                  <p>
                    <i class="el-icon-time"></i>
                    <span>{{item.duration}}</span>
                  </p>
                  <p>
                    <i class="el-icon-service"></i>
                    <span>{{item.play_time}}</span>
                  </p>
                </div>
                <div class="content_p" v-html="item.content.slice(0,60)"></div>
              </div>
            </div>
          </div>
          <el-pagination v-if='total'
            class="box_pageint"
            @current-change='handlecurrentchange'
            :current-page="types.page"
            background
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
          <div v-else>暂无此篇文章</div>
        </el-card>
      </el-col>
      <el-col :span='8'>
        <el-card class="marting_top" :body-style='{padding:0,fontSize:0}'>
          <img style="width:100%" src="../assets/images/liebiao_05.jpeg" alt="">
        </el-card>
        <!-- 排行列表 -->
        <el-card class="marting_top">
          <div slot="header">
            <span style="font-weight: 900;">悦读频道 TOP 10</span>
          </div>
          <div v-for="(item,index) in orderlist" :key="index" class="text item">
            <h4 style="font-size:14px" class="shou"   @click="detailid(item.id)">{{index+1}}.{{item.title}}</h4>
            <p style="font-size:13px;color:#999">文：<span style="margin-right:30px">{{item.author}}</span> 主播：<span>{{item.podcast}}</span></p>
          </div>
        </el-card>
        <el-card class="marting_top" :body-style='{padding:0,fontSize:0}'>
          <img style="width:100%" src="../assets/images/liebiao_16.gif" alt="">
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'list',
  data(){
      return{
        types:{
            query:'',
            type_id:'1',
            page:1,
        },
        // 文章总数
        total:0,
        // 文章列表
        list:[],
        // 排行前十的文章
        orderlist:[],
        // 评论信息
        comments:[],
      }
  },
  methods:{
          // 显示第几页
    handlecurrentchange(val){
      this.types.page=val
      this.getlist()
    },
        // 获取文章
    getlist(){
      this.$axios.get('/getpostcate',{
        params:this.types
      }).then(res=>{
        this.list=res.data.data
      })
      this.$axios.get('/gettotal',{params:{type_id:this.types.type_id,query:this.types.query}}).then(res=>{
        this.total=res.data.list[0].total
        console.log(res.data.list[0].total)
      })
    },
    // 获取排行前十的
    getorderlist(){
      this.$axios.get('/getorder').then(res=>{
        this.orderlist=res.data.list
      })
    },
    // 进入文章详情页
    detailid(id){
        this.$router.push({
            name:'detail',
            params:{
                id:this.types.type_id,
                pageid:id,
                query:this.types.query
            }
        })
    }
  },
  created(){
      this.types.type_id=this.$route.params.id
      this.getorderlist()
      this.getlist()
  },
    watch:{
    '$route'(to,form){
        this.types.type_id=to.params.id
        this.types.page=1
        this.types.query=to.params.query
        this.getlist()
        console.log(to.params.query)
    },
    
  }
}
</script>

<style lang="less" scoped>
.shou{
    cursor: pointer;
}
.tops{
  margin-top: 100px;
}
.w{
  width:1000px;
  margin:0 auto;
}
.content_box{
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  .content_left{
    width: 290px;
    height: 210px;
    margin-right: 10px;
    img{
      width: 100%;
      height: 100%;
      vertical-align: bottom;
    }
  }
  .content_right{
    width: 100%;
    .content_si{
      display: flex;
      p{
        margin-right: 20px;
        i{
          columns: #222222;
          margin-right: 4px;
        }
        span{
          font-size: 12px;
          color:#666
        }
      }
    }
    .content_p{
      font-size: 12px;
      height: 80px;
      overflow: hidden;
      padding-right: 10px;
      line-height: 30px;
    }
  }
}
.button_but{
  padding-bottom: 100px;
}
.el-pagination{
  margin-top: 40px;
}
.marting_top{
  margin-top: 20px;
}
</style>
